<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑商品</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<body>


<!--表单-->

<form class="layui-form">

    <div class="layui-form-item">
        <label class="layui-form-label">父商品类别</label>
        <div class="layui-input-inline">
            <select name="parentId" lay-filter="parentId"></select>
        </div>
        <label class="layui-form-label">子商品类别</label>
        <div class="layui-input-inline">
            <select name="categoryId"></select>
        </div>
    </div>

<div class="layui-form-item">
    <label class="layui-form-label">商品名</label>
    <div class="layui-input-inline">
        <input class="layui-input" type="text" name="name" required placeholder="请输入商品名">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">商品描述</label>
    <div class="layui-input-inline">
        <textarea name="dscp" placeholder="请输入商品描述" class="layui-textarea" required></textarea>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">商品售价</label>
    <div class="layui-input-inline">
        <input class="layui-input" step="0.01" type="text" name="price" required placeholder="请输入商品出售价">
    </div>

    <label class="layui-form-label">商品标价</label>
    <div class="layui-input-inline">
        <input class="layui-input" type="text" name="markPrice" required placeholder="请输入市场价">
    </div>

</div>


<div class="layui-form-item">
    <label class="layui-form-label">商品颜色</label>
    <div class="layui-input-inline">
        <input class="layui-input" type="text" name="color" required placeholder="请输入商品颜色">
    </div>

    <label class="layui-form-label">商品版本</label>
    <div class="layui-input-inline">
        <input class="layui-input" type="text" name="version" required placeholder="请输入商品版本">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">主页推荐</label>
    <div class="layui-input-inline">
        <input type="radio" name="recom" value="0" title="不推荐" checked>
        <input type="radio" name="recom" value="1" title="推荐">
    </div>

    <label class="layui-form-label">商品库存</label>
    <div class="layui-input-inline">
        <input class="layui-input" type="number" step="1" name="count" required placeholder="请输入商品库存">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">主页推荐</label>
    <div class="layui-input-inline">
        <input type="radio" name="status" value="0" title="上架" checked>
        <input type="radio" name="status" value="1" title="下架">
    </div>
    <label class="layui-form-label">商品内容</label>
    <div class="layui-input-inline">
        <input class="layui-input" type="text" name="content" required placeholder="请输入商品内容">
    </div>
</div>


<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">商品图片</label>
        <div class="layui-input-block">
            <!--图片上传的控件-->
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test2">多图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="demo2"></div>
                </blockquote>
            </div>
        </div>
    </div>
</div>


<div class="layui-form-item">
    <div class="layui-input-block">、
        <input type="hidden" name="pic">
        <input type="hidden" name="id">
        <button type="submit" lay-submit lay-filter="goods-edit"
                class="layui-btn">提交</button>
    </div>

</div>

</form>


<script>
    layui.use(['form','upload','element'],function (){
        var form = layui.form,
            upload = layui.upload,
            element = layui.element,
            $=layui.$;

        //取出要编辑的分类信息
        var goods = JSON.parse(sessionStorage.getItem('goods-edit'));

        //商品名
        $('input[name="name"]').val(goods.name);

        //推荐
        $('input[name="recom"][value="'+goods.recom+'"]').attr('checked','checked');

        //描述
        $('textarea[name="dscp"]').val(goods.dscp);

        //状态
        $('input[name="status"][value="'+goods.status+'"]').attr('checked','checked');

        //ID
        $('input[name="id"]').val(goods.id);

        //售价
        $('input[name="price"]').val(goods.price);

        //标价
        $('input[name="markPrice"]').val(goods.markPrice);

        //颜色
        $('input[name="color"]').val(goods.color);

        //版本
        $('input[name="version"]').val(goods.version);

        //库存
        $('input[name="count"]').val(goods.count);

        //内容
        $('textarea[name="content"]').val(goods.content);




        //ajax获取商品父分类列表
        var getParentCategory = function (){

        $.ajax({
            url: '/api/category',
            data: {parentId: 0},
            type: 'get',
            dataType: 'json',
            success: function (result){
                var html = '<option value="">请选择商品父分类</option>';
                //遍历查询到的数据
                $.each(result.data, function (index, item){
                    if (goods.category1.parentId == item.id){
                        html += '<option value="'+item.id+'"selected>'+item.name+'</option>';
                    }else {
                        html += '<option value="'+item.id+'">'+item.name+'</option>';
                    }

                });
                $('select[name="parentId"]').html(html);

                //渲染一次表单
                form.render();
            },
            error: function (){
                layer.msg('请求失败');
            }
        });
      };

        //调用
        getParentCategory();

        //动作,父分类选择的动作
        form.on('select(parentId)',function (data) {
            var parentId = data.value;
            layer.msg(parentId);
            //二级联动
            if (parentId){
                //查询当前父分类下的子分类
                $.ajax({
                    url: '/api/category',
                    data: {parentId: parentId},
                    type: 'get',
                    dataType: 'json',
                    success: function (result){
                        var html = '<option value="">请选择商品子分类</option>';

                        $.each(result.data, function (index, item){
                            if (goods.category1.id == item.id){
                                html += '<option value="'+item.id+'"selected>'+item.name+'</option>';
                            }else {
                                html += '<option value="'+item.id+'">'+item.name+'</option>';
                            }

                        });
                        $('select[name="categoryId"]').html(html);

                        form.render();
                    },
                    error: function (){
                        layer.msg("请求失败");
                    }
                });
            }else {
                $('select[name="categoryId"]').html('');
                form.render();
            }
        }),

        //多图片上传
        upload.render({
            elem: '#test2',
            url: '/api/upload', //配置你自己的上传接口
            multiple: true,
            before: function (obj){

            },
            done: function (res){

                $('#demo2').append('\
                        <img style="width:92px; height:92px; cursor: pointer" \
                        src="/upload/'+res.data+'"\
                        data-name="'+res.data+'">\
                        ');
            }
        });

        //图片删除操作
        $('#demo2').on('click','img',function (){
            $(this).remove();
        });


        //表单的提交
        form.on('submit(goods-edit)',function (data){

            //准备好图片的参数
            var pics = [];
            $('#demo2 img').each(function (){
                var url = $(this).attr('data-name');
                pics.push({url:url});
            });

            data.field.pics = pics;

            //ajax方式将表单数据，提交到服务器
            //添加分类的url  /api/category  put
            $.ajax({
                url: '/api/goods',
                data: JSON.stringify(data.field),
                contentType: 'application/json; charset=utf-8',
                type: 'put',
                dataType: 'json',
                success: function (result){
                    if (result.code == 0){
                        parent.layer.msg("修改成功");
                        //关闭弹出窗
                        parent.layer.closeAll('iframe');


                    }else {
                        layer.msg(result.msg);
                    }

                },
                error: function (){
                    layer.msg("请求失败");
                }
            })

            //阻止表单自动提交
            return false;
        });
    });

</script>


</body>
</html>